<script setup lang="ts">
import { ref, PropType } from 'vue'
import { Plus, Minus, Grid } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import { getVote, createVote, updateVote, deleteVote } from '@/api/cms/vote'
import LabelTip from '@/components/cms/LabelTip.vue'
import DialogForm from '@/components/cms/DialogForm.vue'

defineOptions({
  name: 'VoteForm'
})
defineProps({
  modelValue: { type: Boolean, required: true },
  beanId: { type: String, default: null },
  beanIds: { type: Array as PropType<string[]>, required: true }
})
defineEmits({ 'update:modelValue': null, finished: null })
const focus = ref<any>()
const values = ref<any>({})

let optionIndex = -1
const addNewLine = (index: number) => {
  optionIndex -= 1
  values.value.items.splice(index, 0, { id: optionIndex, count: 0 })
}
</script>

<template>
  <dialog-form
    v-model:values="values"
    :name="$t('cms.menu.interact.vote')"
    :query-func="getVote"
    :create-func="createVote"
    :update-func="updateVote"
    :delete-func="deleteVote"
    :bean-id="beanId"
    :bean-ids="beanIds"
    :focus="focus"
    :init-values="
      () => ({
        voteMode: 1,
        voteInterval: 0,
        total: 0,
        enabled: true,
        items: [{ id: -1, count: 0 }]
      })
    "
    :to-values="(bean) => ({ ...bean })"
    :model-value="modelValue"
    perms="vote"
    large
    @update:model-value="(event) => $emit('update:modelValue', event)"
    @finished="() => $emit('finished')"
  >
    <template #default="{}">
      <el-row>
        <el-col :span="24">
          <el-form-item
            prop="title"
            :rules="{ required: true, message: () => $t('common.required') }"
          >
            <template #label><label-tip message="cms.vote.title" /></template>
            <el-input ref="focus" v-model="values.title" maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="description">
            <template #label><label-tip message="cms.vote.description" /></template>
            <el-input v-model="values.description" type="textarea" :rows="3" maxlength="1000" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="beginDate">
            <template #label><label-tip message="cms.vote.beginDate" help /></template>
            <el-date-picker v-model="values.beginDate" type="datetime" class="w-full" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="endDate">
            <template #label><label-tip message="cms.vote.endDate" help /></template>
            <el-date-picker v-model="values.endDate" type="datetime" class="w-full" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="voteMode"
            :rules="{ required: true, message: () => $t('common.required') }"
          >
            <template #label><label-tip message="cms.vote.mode" help /></template>
            <el-select v-model="values.voteMode" class="w-full"
              ><el-option
                v-for="n in [1, 2, 3]"
                :key="n"
                :value="n"
                :label="$t(`cms.vote.mode.${n}`)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="createTime">
            <template #label><label-tip message="cms.vote.created" /></template>
            <el-date-picker v-model="values.createTime" type="createTime" class="w-full" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="voteMultiple">
            <template #label><label-tip message="cms.vote.multiple" help /></template>
            <el-switch v-model="values.voteMultiple" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="voteInterval"
            :rules="{ required: true, message: () => $t('common.required') }"
          >
            <template #label><label-tip message="cms.vote.interval" help /></template>
            <el-input-number v-model="values.voteInterval" :min="0" :max="32767" class="w-48" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="enabled">
            <template #label><label-tip message="cms.vote.enabled" /></template>
            <el-switch v-model="values.enabled" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="voteNum">
            <template #label><label-tip message="cms.vote.voteNum" /></template>
            <el-input-number :model-value="values.voteNum" disabled class="w-48" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <template #label><label-tip message="cms.vote.items" /></template>
            <table class="w-full table-auto border-slate-450">
              <thead>
                <tr>
                  <th class="w-32"></th>
                  <th class="">{{ $t('cms.voteOption.title') }}</th>
                  <th class="w-40">{{ $t('cms.voteOption.count') }}</th>
                </tr>
              </thead>
              <draggable
                v-model="values.items"
                :animation="250"
                tag="tbody"
                handle=".draggable-handle"
                item-key="id"
              >
                <template #item="{ element: item, index }">
                  <tr>
                    <td class="p-2">
                      <el-icon class="text-2xl align-middle cursor-move draggable-handle"
                        ><Grid
                      /></el-icon>
                      <el-button
                        class="ml-3"
                        :icon="Plus"
                        circle
                        @click="() => addNewLine(index + 1)"
                      />
                      <el-button
                        :disabled="values.items.length <= 1"
                        :icon="Minus"
                        circle
                        @click="
                          () => (values.items = values.items.filter((it) => it.id !== item.id))
                        "
                      />
                    </td>
                    <td class="p-2">
                      <el-form-item
                        :prop="`items.${index}.title`"
                        :rules="{ required: true, message: () => $t('common.required') }"
                      >
                        <el-input v-model="item.title" maxlength="1000" />
                      </el-form-item>
                    </td>
                    <td class="p-2"
                      ><el-input-number
                        v-model="item.count"
                        :min="0"
                        :max="2147483647"
                        class="w-48"
                    /></td>
                  </tr>
                </template>
              </draggable>
            </table>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </dialog-form>
</template>
